<script setup>
    import * as echarts from "echarts"
    import { onMounted, onUnmounted } from 'vue'

    const props = defineProps({
        partyTypeData: {
            type: Array,
            default: []
        },
        partyTypeCount: {
            type: Array,
            default: []
        }
    })

    let type = props.partyTypeData
    let dataValue = props.partyTypeCount

    let resData = $ref([])

    type.forEach((item, index) => {
        resData.push({
            name: type[index],
            value: dataValue[index]
        })
    })

    let eCharts = null
    let partyMemberPie = $ref(null) 

    onMounted(() => {
        init()
    })

    const init = () => {
        let option = {
            color: ['#006AF2', '#00B266', '#EBAB00', '#FB4E81'],
            tooltip: {
                trigger: 'item',
                backgroundColor: "#0157DA",
                borderWidth: 0,
                textStyle: {
                    color: "#fff"
                },
            },
            // legend: {
            //     bottom: 30,
            //     itemWidth: 12,
            //     itemHeight: 12,
            //     textStyle: {
            //         backgroundColor: 'transparent',
            //         color: '#fff',
            //         width: 50
            //     }
            // },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: [0, 75],
                    center: ['50%', '50%'],
                    // roseType: 'area',
                    label: {
                        // alignTo: 'labelLine', // ! 文字对齐方式
                        // formatter: `{b|${b}个}{c|${c}}\n{a|${u1}}`,
                        formatter: '{b|{d}% ({c})}\n{a|{b}}',
                        minMargin: 5,
                        lineHeight: 15,
                        rich: {
                            a: { fontSize: 14, color: '#fff', align: 'center', padding: [10, 0, 5, 0] },
                            b: { fontSize: 14, align: 'left', color: '#fff', padding: [0, 0, 10, 0] },
                        },
                    },
                    labelLine: {
                        length: 8,
                        length2: 10,
                        maxSurfaceAngle: 80
                    },
                    data: resData
                }
            ]
        }

        eCharts = echarts.init(partyMemberPie)
        eCharts.setOption(option)
    }



</script>

<template>
    <div class="party-age-warp card-box">
        <div class="card-title">
            <img src="../../../assets/images/card-title-icon-dangyuan.png">
            党员分布
        </div>

        <div class="echarts-bar" ref="partyMemberPie"></div>

    </div>
</template>

<style lang="less" scoped>
    .party-age-warp{
        height: 270px;
        margin-top: 10px;

        .echarts-bar{
            height: 230px;
        }
    }
</style>